<template>
	<view class="feebd">
		<view class="uni-form-item uni-column">
				<view class="title">联系方式</view>
				<input class="uni-input"  focus placeholder="请输入手机号" v-model="data.phone" />
			</view>
			<view class=" uni-column" >
				<view class="title">反馈内容</view>
				<uni-easyinput type="textarea" v-model="data.values" placeholder="请输入反馈内容" @input="onlen()" />
			</view>
			<text ref="text" class="texts" :style="{color: data.colors}">{{data.lengt}}/200</text>
			<button @click="submit()">点击提交</button>
	</view>
</template>

<script setup>
import {reactive,ref} from 'vue'
const text = ref ()
const data = reactive ({
	phone:'',
	values:'',
	lengt:0,
	colors:'grey',
	idInpu:false
})
const onlen =  ()=>{
data.lengt = data.values.length
if(data.lengt>20&&!data.idInpu){
	data.colors = 'red'
	uni.$showMeg('内容不能超过20')
	data.idInpu=true
}else if(data.lengt<=20&&data.idInpu){
	data.colors = 'grey'
	data.idInpu=false
}
}
const submit= ()=>{
	if(!/^[1][3-9][0-9]{9}$/.test(data.phone)){
		uni.$showMeg('请输入正确手机号')
		return
	}
	if(data.lengt>20){
		uni.$showMeg('内容过多')
		return
	}
	uni.$showMeg('提交成功','success')
	setTimeout(() => {
		uni.switchTab({ url: '/pages/my/my' })
	}, 1000);
}
</script>

<style lang="scss" scoped>
.feebd{
	padding: 0 40rpx;
}
.title{
	line-height: 80rpx;
	color: grey;
	font-size: 24rpx;

}
.uni-input{
	height: 100rpx;
}
.uni-form-item{
	border-bottom: 18rpx solid rgb(240, 240, 240);
}
uni-easyinput{
	width: 100%;
	border: 1px solid grey;
	height: 200rpx;
	border-bottom: none;
}
button{
	background: #FE686A;
	color: #fff;
	border-radius: 50rpx;
	margin-top: 100rpx;
}
.texts{
	float: right;
	color: #ccc;
}
</style>